<script setup>
  import { ref, computed, useTemplateRef, onMounted, watch } from 'vue'
  import {
    getMyBorrowList,
    getMyRegistrationList,
    getMyReservationList,
    cancelRegistration,
    checkinLecture,
    cancelReservation,
    checkinReservation,
    returnBook,
  } from '@/api'
  import { useUserStore } from '@/store'
  import { ElMessage } from 'element-plus'

  const tab = ref(0)
  const formRef = useTemplateRef('form')
  const userStore = useUserStore()

  const tableDataList = ref([])

  watch(
    () => tab.value,
    () => {
      tab.value
      handleGetRecords()
    }
  )

  const showTitle = computed(() => {
    if (tab.value === 0) {
      return '图书借阅记录'
    } else if (tab.value === 1) {
      return '讲座报名记录'
    } else {
      return '座位预约记录'
    }
  })
  const showColums = computed(() => {
    if (tab.value === 0) {
      return bookColumns
    } else if (tab.value === 1) {
      return lectureColumns
    } else {
      return seatColumns
    }
  })

  const tabOptions = [
    { label: '图书借阅记录', value: 0 },
    { label: '讲座报名记录', value: 1 },
    { label: '座位预约记录', value: 2 },
  ]

  const bookColumns = [
    { label: '书名', prop: 'bookTitle' },
    { label: '副本号', prop: 'bookCopyId' },
    { label: '借阅时间', prop: 'borrowTime' },
    { label: '预期归还时间', prop: 'dueReturnTime' },
    { label: '实际归还时间', prop: 'actualReturnTime' },
    { label: '状态', prop: 'borrowStatusDesc' },
    { label: '操作', prop: 'bookOption' },
  ]

  const lectureColumns = [
    { label: '讲座名称', prop: 'lectureTitle' },
    { label: '报名时间', prop: 'registerdTime' },
    { label: '讲座开始时间', prop: 'startTime' },
    { label: '讲座结束时间', prop: 'endTime' },
    { label: '签到时间', prop: 'signTime' },
    { label: '状态', prop: 'registrationStatusText' },
    { label: '操作', prop: 'lectureOption' },
  ]

  const seatColumns = [
    { label: '自习室', prop: 'roomName' },
    { label: '座位号', prop: 'seatNumber' },
    { label: '预约时间', prop: 'reservationTime' },
    { label: '开始时间', prop: 'startTime' },
    { label: '结束时间', prop: 'endTime' },
    { label: '签到时间', prop: 'signTime' },
    { label: '状态', prop: 'reservationStatusDesc' },
    { label: '操作', prop: 'seatOption' },
  ]

  const handleGetRecords = () => {
    let p = null
    if (tab.value === 0) {
      const userId = userStore.userId
      p = getMyBorrowList(userId).then(res => {
        tableDataList.value = res.data
      })
    } else if (tab.value === 1) {
      p = getMyRegistrationList().then(res => {
        tableDataList.value = res.data
      })
    } else {
      p = getMyReservationList().then(res => {
        tableDataList.value = res.data
      })
    }

    formRef.value.load(p)
  }

  // 取消报名
  const onCancelRegistration = row => {
    cancelRegistration(row.lectureId).then(res => {
      ElMessage.success('取消成功')
      handleGetRecords()
    })
  }

  // 讲座签到
  const onCheckinLecture = row => {
    checkinLecture(row.registrationId).then(res => {
      ElMessage.success('签到成功')
      handleGetRecords()
    })
  }

  // 归还图书
  const onReturnBook = row => {
    returnBook({ borrowId: row.id }).then(res => {
      ElMessage.success('归还成功')
      handleGetRecords()
    })
  }

  // 取消预约
  const onCancelReservation = row => {
    cancelReservation(row.id).then(res => {
      ElMessage.success('取消成功')
      handleGetRecords()
    })
  }

  // 座位签到
  const onCheckinReservation = row => {
    checkinReservation(row.id).then(res => {
      ElMessage.success('签到成功')
      handleGetRecords()
    })
  }

  onMounted(() => {
    handleGetRecords()
  })
</script>

<template>
  <page-layout>
    <template #header>
      <el-button @click="handleGetRecords">刷新</el-button>
      <el-segmented v-model="tab" :options="tabOptions" />
    </template>

    <div class="title">{{ showTitle }}</div>
    <dynamic-table :columns="showColums" :data="tableDataList" ref="form">
      <template #bookOption="{ row }">
        <el-button type="success" @click="onReturnBook(row)" :disabled="row.borrowStatus === 1">归还</el-button>
      </template>
      <template #lectureOption="{ row }">
        <el-button type="success" @click="onCheckinLecture(row)">签到</el-button>
        <el-button type="info" @click="onCancelRegistration(row)">取消</el-button>
      </template>
      <template #seatOption="{ row }">
        <el-button type="success" @click="onCheckinReservation(row)">签到</el-button>
        <el-button type="info" @click="onCancelReservation(row)">取消</el-button>
      </template>
    </dynamic-table>
  </page-layout>
</template>

<style scoped lang="less">
  .title {
    padding: 20px;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: bold;
    color: var(--primary-600);
    border-radius: var(--round-2);
    background-color: #fff;
  }
</style>
